<template>
  <a-spin :spinning="loading">
    <a-card>
      <section slot="title">首页</section>
      <div class="list">
        <div class="box">
          <a-icon type="account-book" :style="{ fontSize: '40px', color: '#BD3124' }" />
          <div class="ml-20">
            <div class="price">¥<a-statistic :value="112893" :valueStyle="{ fontSize: '30px' }" /></div>
            <div class="mt-10">总付款订单数</div>
            <div class="mt-10">今日：¥888</div>
          </div>
        </div>
        <div class="box">
          <a-icon type="transaction" :style="{ fontSize: '40px', color: '#CBA43F' }" />
          <div class="ml-20">
            <div class="price">¥<a-statistic :value="112893" :valueStyle="{ fontSize: '30px' }" /></div>
            <div class="mt-10">总付款金额</div>
            <div class="mt-10">今日：¥888</div>
          </div>
        </div>
        <div class="box">
          <a-icon type="global" :style="{ fontSize: '40px', color: '#0F40F5' }" />
          <div class="ml-20">
            <div class="price"><a-statistic :value="112893" :valueStyle="{ fontSize: '30px' }" /></div>
            <div class="mt-10">总浏览人数</div>
            <div class="mt-10">今日：888</div>
          </div>
        </div>
        <div class="box">
          <a-icon type="dollar" :style="{ fontSize: '40px', color: '#FCCA00' }" />
          <div class="ml-20">
            <div class="price">¥<a-statistic :value="112893" :valueStyle="{ fontSize: '30px' }" /></div>
            <div class="mt-10">账户余额</div>
            <a-button>申请提现</a-button>
          </div>
        </div>
      </div>
      <div class="list mt-30">
        <div class="echarts">
          <div>7天流水统计</div>
          <Charts :options="topDataOptions" height="400" />
        </div>
        <div class="echarts">
          <div>订单数统计</div>
          <Charts :options="orderOptions" height="400" />
        </div>
      </div>
      <div class="list mt-30">
        <div>收支明细：</div>
        <div>更多 》</div>
      </div>
      <a-table
        class="mt-16 order-table"
        :columns="columns"
        :data-source="data"
        :scroll="scroll"
        :pagination="pagination"
      >
      </a-table>
    </a-card>
  </a-spin>
</template>
<script>
import Charts from '@/components/v-echarts'
export default {
  data() {
    return {
      loading: false,
      data: [{ id: 1111, travellerName: '--', status: 1 }],
      columns: [
        { title: '序号', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        { title: '额度', dataIndex: 'id', align: 'center', width: 140, scopedSlots: { customRender: 'id' } },
        {
          title: '交易时间',
          dataIndex: 'travellerName',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'travellerName' }
        },
        {
          title: '支付方式',
          dataIndex: 'status',
          align: 'center',
          width: 70,
          scopedSlots: { customRender: 'status' }
        },
       
      ]
    }
  },
  components: { Charts },
  computed: {
    orderOptions() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
      return option
    },
    topDataOptions() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天', '第七天']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
      return option
    }
  },
  watch: {},
  async created() {},
  methods: {}
}
</script>
<style lang="less" scoped>
.list {
  display: flex;
  justify-content: space-between;
  .echarts {
    width: 49%;
  }
  .box {
    width: 24%;
    box-shadow: 0 0 20px #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    .price {
      font-size: 30px;
      font-weight: bold;
      color: #000;
      display: flex;
      align-items: center;
    }
  }
}
</style>
